import React from 'react';
import { InboxOutlined, PlusOutlined, CloudUploadOutlined, PlayCircleOutlined, ArrowRightOutlined, AreaChartOutlined, DeleteOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload, Button, Card, Flex, Typography, Space, Image, Col, Row } from 'antd';
import {
  PageContainer,
  DrawerForm,
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProCard,
  ProDescriptions,
} from '@ant-design/pro-components';
import { getVideoList } from '@/services/ant-design-pro/api';
import { useState, useEffect } from 'react';
const cardStyle: React.CSSProperties = {
  width: 240,
  height: 120,
  border: '1px solid #d9d9d9',
};

const imgStyle: React.CSSProperties = {
  display: 'block',
  width: 350,
};


const { Dragger } = Upload;
const { Title } = Typography;
import { CheckCard } from '@ant-design/pro-components';

const App: React.FC = () => {
  // const [cardHovered, setCardHovered] = useState(false);

  // const handleMouseEnter = () => {
  //   setCardHovered(true);
  // };

  // const handleMouseLeave = () => {
  //   setCardHovered(false);
  // };
  const [videoList, setVideoList] = useState<API.ListResponse['list'] | undefined>(undefined);
  const [hoveredVideoId, setHoveredVideoId] = useState<number | null>(null);

  useEffect(() => {
    // 使用你提供的 getVideoList 函数发起请求
    async function fetchVideoList() {
      try {
        const response = await getVideoList();

        console.log(response.data.list);
        if (response.data) {
          setVideoList(response.data.list);
          // console.log(response.data.data.list);
        }
      } catch (error) {
        console.error('Failed to fetch video list:', error);
      }
    }

    fetchVideoList();
  }, []);

  const handleCardMouseEnter = (videoId: number) => {
    setHoveredVideoId(videoId);
  };

  const handleCardMouseLeave = () => {
    setHoveredVideoId(null);
  };


  return (
    <PageContainer title='我的数字分身'>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={8} lg={6} style={{ width: '300px' }}>
          <ProCard style={{ height: '140px' }}>
            <Flex style={{ marginTop: '10px' }}>
              <Title level={5}>
                数字分身
              </Title>
            </Flex>
            <Flex>
              上传视频，快速复刻数字分身
            </Flex>

            <Flex justify="space-between">
              <Drawer></Drawer>
            </Flex>
          </ProCard>
        </Col>

        {/* 如果有更多的 ProCard 组件，可以继续在这里添加 Col 组件 */}
        {videoList ? (
          videoList.map((video, index) => (
            <Col key={index} xs={24} sm={12} md={8} lg={6} style={{ width: '300px' }}>
              <ProCard style={{ height: '140px' }} onMouseEnter={() => handleCardMouseEnter(video.id)} onMouseLeave={handleCardMouseLeave}>
                <Flex>
                  <VideoPlayer url={video.video_url} />
                </Flex>
                <Flex justify="space-between">
                  {(hoveredVideoId === video.id) && (
                    <>

                      <Button
                        type="link"
                        onClick={() => {
                          // 实现删除功能
                        }}
                      >
                        <DeleteOutlined />
                        删除
                      </Button>
                      <Button
                        type="link"
                        onClick={() => {
                          // 实现去创作功能
                        }}
                      >
                        <ArrowRightOutlined />
                        去创作
                      </Button>
                      {/* <Flex>
                        <Title level={5}>{video.title}</Title>
                      </Flex> */}
                    </>
                  )}
                </Flex>

              </ProCard>
            </Col>
          ))
        ) : (
          <div>Loading...</div>
        )}
      </Row>
    </PageContainer>
  )
};

export default App;


const VideoPlayer: React.FC<{ url: string }> = ({ url }) => (
  <video controls style={{ width: '100%', height: '100%', objectFit: 'cover' }} height={85} >
    <source src={url} type="video/mp4" />
    Your browser does not support the video tag.
  </video>
);

const initialFileState = {
  uploading: false,
  url: null,
};

const Drawer: React.FC = () => {
  const [modalVisit, setModalVisit] = useState(false);
  const [drawerVisit, setDrawerVisit] = useState(false);

  const [fileState, setFileState] = useState(initialFileState);
  const handleUploadChange = (info: any) => {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
      setFileState({ uploading: false, url: info.file.response.video_url }); // 假设后端返回的对象包含video_url字段
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
      setFileState(initialFileState);
    }
  };

  const props: UploadProps = {
    name: 'video_file',
    multiple: true,
    action: 'http://127.0.0.1:8000/api/upload-video',
    onChange: handleUploadChange,
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  return (
    <>
      <Space >
        <Button
          type="primary"
          onClick={() => {
            // setModalVisit(true);
            setDrawerVisit(true);
            // message.success('提交成功');
          }}
        >
          <PlusOutlined />
          快速复刻
        </Button>
      </Space>
      <ModalForm width={500}
        // title="视频要求"
        open={modalVisit}
        submitter={{
          submitButtonProps: {
            type: 'primary',
          },
          resetButtonProps: {
            style: {
              display: 'none',
            },
          },
        }}
        onFinish={async () => {
          setDrawerVisit(true);
          // message.success('提交成功');
          return true;
        }}
        onOpenChange={setModalVisit}
      >
        <Card title="视频要求">
          <div>1.不要使用有多人的视频</div>
          <div>2.确保人脸不要太小，建议人脸宽度占整体画面宽度的1/4以上</div>
          <div>3.人脸不要太大，确保整张人脸都在屏幕区域内，人脸不要出屏幕</div>
          <div>4.确保面部特征没有被遮挡，并努力让面部清晰可见</div>
          <div>5.上传的视频分辨率不应低于360p，也不应超过3840p，建议分辨率为720p或1080p</div>
          <div>6.视频长度不应少于5秒，不超过30分钟</div>
        </Card>
        <Card title="错误示例">
          <img
            width={300}
            src="/images/videospec.png"
          />
        </Card>
      </ModalForm>

      <DrawerForm
        width={400}
        onOpenChange={setDrawerVisit}
        title="复刻数字分身"
        open={drawerVisit}
        onFinish={async () => {
          message.success('提交成功');
          return true;
        }}
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="数字分身名称"
            // tooltip="请输入数字分身名称"
            placeholder="请请输入数字分身名称"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProDescriptions
            column={2}
            title="上传视频要求"
          // tooltip="上传视频要求"
          >
            <ProDescriptions.Item label="文本" valueType="option">
              <Button
                type="primary"
                onClick={() => {
                  setModalVisit(true);
                }}
                key="reload"
              >
                查看具体要求
              </Button>
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="视频方向"
              valueType="text"
            >
              横向或纵向
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="视频时长"
              valueType="text"
            >
              5秒-30分钟
            </ProDescriptions.Item>
            <ProDescriptions.Item label="文件格式" valueType="text">
              mp4、mov
            </ProDescriptions.Item>
            <ProDescriptions.Item label="分辨率" valueType="text">
              360p-4k
            </ProDescriptions.Item>
            <ProDescriptions.Item label="文件大小" valueType="text">
              小于500M
            </ProDescriptions.Item>
          </ProDescriptions>
        </ProForm.Group>
        <ProForm.Group>
          {fileState.url ? (
            <VideoPlayer url={fileState.url} />
          ) : (
            <Dragger {...props} style={imgStyle}>
              <p className="ant-upload-drag-icon">
                {/* <InboxOutlined /> */}
                <CloudUploadOutlined />
              </p>
              <p className="ant-upload-text">请上传一段视频，作为驱动数字人的模板</p>
              <p className="ant-upload-hint">
                将文件拖到此处，或点击此区域上传
              </p>
            </Dragger>
          )
          }
        </ProForm.Group>
      </DrawerForm >
    </>
  );
};
